<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期级联菜单</title>
    <script>
        function loadDate() {
            let year = document.getElementById("year");
            // 获取当前年份
            let currentYear = new Date().getFullYear();

            // 加载年份
            for (let i = currentYear - 30; i <= currentYear; i++) {
                year[year.length] = new Option(i + "年", i)
            }

            // 加载月份
            let month = document.getElementById("month");
            for (let i = 1; i <= 12; i++) {
                month[month.length] = new Option(i + "月", i)
            }
        }

        function loadDay() {
            // 获取当前所选择的年份与月份服务器值
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;

            let day = document.getElementById("day");

            // 加载之前清除原有的数据
            day.length = 1;

            // 如果所选择的年份或者月份无效,则不进行加载
            if (year == -1 || month == -1) {
                return;
            }

            // 根据年份与月份获取对应的天数
            // 定义下个月的第一天的前一天,即为这个月的最后一天
            // new Date(year,month-1+1,1-1)
            let countDay = new Date(year, month, 0).getDate();
            for (let i = 1; i <= countDay; i++) {
                day[day.length] = new Option(i + "日", i);
            }
        }
    </script>
</head>
<body onload="loadDate()">
<!--
    需求一:当页面加载之后自动加载年份与月份
        1.年份为当前年份的前三十年
        2.月份为1-12月
    需求二:当用户选择了年或月的下拉列之后加载天数
        1.选择的年份或者月份无效,则不加载天数
        2.选择的年份与月份有效,则加载出对应天数,考虑闰年
-->
<select id="year" onchange="loadDay()">
    <option value="-1">--年--</option>
</select>
<select id="month" onchange="loadDay()">
    <option value="-1">--月--</option>
</select>
<select id="day">
    <option value="-1">--日--</option>
</select>
</body>
</html>